<template>
    <div class="picker">
        <nav-bar title="选择小区"></nav-bar>

        <div class="search-bar">
            <search-bar @search="onSearch"></search-bar>
        </div>

        <index-list class="index-list" ref="indexList" type="picked" :sid="sid" @click="onclick"></index-list>

        <div class="pop" v-if="isShow" @click="closePop">
            <div class="pop-main">
                <text class="pop-tit font-msyhl">选择小区自提点</text>

                <div class="pop-item" v-for="txt in pickerList" @click="getResult(txt)">
                    <text class="pop-item-txt font-msyhl">{{txt.issue_name}}</text>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
    .picker {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: #fff;
        align-items: stretch;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    .search-bar {
        margin-top: 80px;
        height: 100px;
        background-color: #fff;
        justify-content: center;
        align-items: center;
    }
    .index-list {
        position: absolute;
        left: 0;
        right: 0;
        top: 180px;
        bottom: 0;
    }
    .pop {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.5);
    }
    .pop-main {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 420px;
        background-color: #fff;
    }
    .pop-tit {
        width: 1080px;
        height: 70px;
        line-height: 70px;
        text-align: center;
        color: #313131;
        font-size: 26px;
    }
    .pop-item {
        padding-left: 30px;
        padding-right: 30px;
        height: 70px;
        justify-content: center;
        align-items: flex-start;
    }
    .pop-item-txt {
        font-size: 26px;
        color: #313131;
    }
    .font-msyhl {
        font-family: msyhl;
    }
</style>

<script>
    import searchBar from 'components/search-bar/search-common-bar.vue';
    import navBar from 'components/nav-bar/nav-bar.vue';
    import navigator from 'utils/navigator';
    import modal from 'utils/modal';
    import api from 'api/api';
    import notification from 'utils/notification';
    import constant from 'constants/constant';


    export default{
        props: {
            sid: {
                type: String,
                default: "",
                required: true
            }
        },
        data(){
            return{
                pickerList: [], //自提点列表
                isShow: false //是否展示最终自提点选择列表
            }
        },
        methods: {
            onSearch(value){
                this.$refs.indexList.filterData(value);
            },
            onclick(e){
                let self = this;
                let _val = e.key || "";
                let options = {
                    sid: self.sid,
                    ni: _val
                }
                api.sendHttp("getSelfPickerApi",options).then(res=>{
                    self.pickerList = res.data.issue || [];
                    self.isShow = true;
                },res=>{
                     modal.toast(res.msg || "获取自提点信息失败");
                })
            },
            getResult(value){
                let options = {
                    sid: this.sid,
                    value: value
                };
               notification.send(constant.EVENT_GET_SELFPICK,options); //发送自提点广播
               navigator.pop(); //关闭当前activity
            },
            closePop(){
                this.isShow = false;
            }
        },
        components: {
            "search-bar": searchBar,
            "nav-bar": navBar
        }
    }
</script>
